<!-- eslint-disable prettier/prettier -->
<script setup lang="ts">
// v-show 与 v-if 的区别
import { ref,onBeforeMount ,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue'

import AboutView from './components/AboutView.vue'

const show = ref(false)

onBeforeMount(()=>{
  console.log('注册一个钩子，在组件被挂载之前被调用。');
})
onMounted(()=>{
  console.log('注册一个回调函数，在组件挂载完成后执行。');
})
onBeforeUpdate(()=>{
  console.log('注册一个钩子，在组件即将因为响应式状态变更而更新其 DOM 树之前调用。');
})
onUpdated(()=>{
  console.log('注册一个回调函数，在组件因为响应式状态变更而更新其 DOM 树之后调用。');
})
onBeforeUnmount(()=>{
  console.log('注册一个钩子，在组件实例被卸载之前调用');
})
onUnmounted(()=>{
  console.log('注册一个回调函数，在组件实例被卸载之后调用。');
})




const onShowClick = () =>{
  show.value = !show.value
}
</script>
<!-- eslint-disable prettier/prettier -->
<template>
  <div>
    <button @click="onShowClick">显隐控制</button>
    <AboutView v-if="show"></AboutView>
    <!-- <div v-if="show">
      文章称，最近中美关系有相当幅度的改变，两个元首举行了会晤，双方都有高度意愿对中美可能的冲突进行控管。同时，中美国防部长会面、中国商务部部长与美国贸易代表会面、中美气候特使会面，这些都代表在美国中期选举之后，美中紧张关系出现和缓迹象。至少，中美各部会的沟通平台是一直存在的。
    </div> -->
  </div>
</template>
<!-- eslint-disable prettier/prettier -->
<style scoped lang="scss"></style>
